/*
 *
 * iPhone CSS3
 *
 * Author:   Jeff Batterton
 * Contact:  hello@jeffbatterton.com
 *
 * NOTE: This is an experimental project and I know the code is messy.
 *       If you are new to CSS, don't look any further. This is NOT the way to code.
 *
 */


@font-face { font-family: MPR; src: url('MyriadPro-Regular.otf'); }
@font-face { font-family: MPS; src: url('MyriadPro-Semibold.otf'); }

.display { width: 320px; background: #14161a; padding: 4px; -webkit-border-radius: 4px; }
.gwtcontent { height: 460px; background: white; position: relative;}  /** iPhone is 480px high but 20px in status bar **/

body { background: #f5f6f7; padding: 10px; }

* { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 10px; color: #0d0d0d; }

h1 b { font-family: "MPS", sans-serif; font-size: 24px; font-weight: normal; }
h1 { font-family: "MPR", sans-serif; font-size: 24px; margin: 5px 10px; color: #222; position: relative; }
h1 span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(245,246,247, .6)), to(rgba(245,246,247, 0))); display: block; }

.column_left { float: left; width: 50%; }
.callout h1 { font-size: 40px; margin: 50px 0 0 0; }
.callout .column_left p { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; font-size: 20px; color: #9a9a9a;  line-height: 26px; margin: 0 0 40px 0; }
.callout .column_left a { font-size: 20px; text-decoration: none; color: #08C; }
.callout .column_left a:hover { text-decoration: underline; }

p.footer { font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; color: #888; padding: 10px 0;  }
p.footer a { color: #08c; text-decoration: none; }
p.footer a:hover { text-decoration: underline; }

.wrapper { width: 960px; margin: 0 auto; }
.callout { background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0,0,0, 0.5); -webkit-border-radius: 5px; padding: 5px; overflow: hidden; border: solid rgba(0,0,0, .1); border-width: 1px 0 0 0; }

.perimeter { position: relative; width: 396px; margin: 0 auto; margin-bottom: 5px; padding: 3px 0 0 0; }

.power_button { position: absolute; right: 60px; top: 4px; width: 62px; height: 2px; background: #838384; -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255, 0.5), 0 -1px 0 rgba(255,255,255, 1); -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; }

.silent { position: absolute; top: 72px; left: 0; width: 3px; height: 32px; background: #838384; -webkit-box-shadow: 0 -1px 0 rgba(255,255,255, 1), 0 1px 0 rgba(255,255,255, 1); -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; }

.volume_up { position: absolute; top: 128px; left: 0; height: 38px; -webkit-box-shadow: 0 -1px 0 rgba(255,255,255, 1); -webkit-border-top-left-radius: 3px; border-bottom: 10px solid transparent; border-right: 3px solid #838384; }

.volume_down { position: absolute; top: 200px; left: 0; height: 38px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 1); -webkit-border-bottom-left-radius: 3px; border-top: 10px solid transparent; border-right: 3px solid #838384; }

.device { -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.6); position: relative; width: 372px; background: #fefefe; padding: 6px; border: 1px solid rgba(48,48,47, 0.5); -webkit-border-radius: 60px; margin: 3px auto 0 auto; }
.highlight { width: 370px; background: #fefefe; border: 1px solid #85888a; padding: 6px 0; -webkit-border-radius: 54px; -webkit-box-shadow: 0 1px 9px rgba(0,0,0, 0.6); }

.face_glare { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-border-radius: 48px;  background: -webkit-gradient(linear, right top, -75 300, from(rgba(255,255,255, 0.4)), to(rgba(255,255,255, 0)), color-stop(0.5, rgba(255,255,255, 0.075)), color-stop(0.5, rgba(255,255,255, 0))); }


.face { position: relative; padding: 96px 12px 14px 12px; width: 328px; background: -webkit-gradient(radial, 1% 100%, 1, 1% 100%, 400, from(rgba(21,21,21, 1)), to(#000)); background-color: #000; -webkit-border-radius: 48px; margin: 0 auto; border: 3px solid #000; }

.speaker { position: absolute; top: 43px; left: 155px; z-index: 2; margin: 0 auto 14px auto; background: #000; width: 74px; height: 12px; padding: 3px 0 0 0; -webkit-border-radius: 7px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.125); }
.speaker span { display: block; width: 64px; height: 9px; margin: 0 auto;  background: #797e80; -webkit-border-radius: 4px; overflow: hidden; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0, 1); }
.speaker span p { line-height: 0; margin: 0 0 -2px 0; letter-spacing: -1px; }

.home_button { position: relative; width: 68px; height: 68px; -webkit-border-radius: 34px; margin: 14px auto 0 auto; -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.05); overflow: hidden; background: -webkit-gradient(radial, 50% -48%, 30, 50% -48%, 165, from(rgba(255,255,255, 0)), to(rgba(255,255,255, 0.75)), color-stop(50%, rgba(255,255,255, 0)), color-stop(50%, rgba(255,255,255, 0.075))), #000; }

.home_button div { position: absolute; top: 23px; left: 23px; width: 18px; height: 18px; border: 2px solid #a0a6a8; -webkit-border-radius: 6px; }


.top_bar { height: 19px; border: 1px solid #596269; border-right: 0; border-left: 0; border-top: 0; text-align: center; position: relative; background: -webkit-gradient(linear, left top, left bottom, from(#eff6f9), to(#bdc5c9), color-stop(1, #fff)); -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; }
.top_bar div.battery { position: absolute; top: 5px; right: 10px; }
.top_bar div.battery div.body { float: left; border: 1px solid #868c99; width: 16px; height: 8px; -webkit-border-radius: 1px; background: -webkit-gradient(linear, left top, left bottom, from(#525252), to(#bfbfbf), color-stop(1, #fff)); }

.top_bar div.battery div.body span { width: 66%; height: 100%; display: block; background: -webkit-gradient(linear, left top, left bottom, from(#70d83a), to(#298c08), color-stop(0.2, #c5fc8d)); }

.top_bar div.battery div.contact { float: left; border: 1px solid #868c99; border-left: 0; width: 1px; height: 2px; margin: 3px 0 0 0; -webkit-border-top-right-radius: 1px; -webkit-border-bottom-right-radius: 1px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, 0)), to(rgba(0,0,0, 0.5)), color-stop(1, #fff)); }

.top_bar p.time { color: #000; font-size: 12px; line-height: normal; font-weight: bold; padding: 2px 0 0 0; text-shadow: 0 1px 0 #fff; }
.top_bar p.carrier { position: absolute; top: 9px; left: 32px; color: #4b4f52; font-size: 12px; font-weight: bold; line-height: 0; text-shadow: 0 1px 0 #fff; }
.top_bar p.carrier span { font-size: 12px; color: #0c88de; margin: 0 0 0 3px; text-shadow: 0 1px 0 #fff, inset 0 0 1px rgba(0,0,0, 0.8); }
.top_bar div.signal { position: absolute; top: 4px; left: 10px; }
.top_bar div.signal div { float: left; background: #0c88de; width: 3px; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 1px rgba(0,0,0, 0.8); }
.top_bar div.signal div.one   { height: 2px; margin: 8px 1px 0 0; }
.top_bar div.signal div.two   { height: 4px; margin: 6px 1px 0 0; }
.top_bar div.signal div.three { height: 6px; margin: 4px 1px 0 0; }
.top_bar div.signal div.four  { height: 8px; margin: 2px 1px 0 0; }
.top_bar div.signal div.five  { height: 10px; }



